<template>
  <div id="app">
    <el-container class="container">
      <el-header class="header">
        <div class="header__title">CTFO 多主题实现</div>
        <div class="header__options">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">切换<i class="el-icon-arrow-down el-icon--right"></i></span>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="changeTheme('default')">default</el-dropdown-item>
              <el-dropdown-item @click.native="changeTheme('dark')">dark</el-dropdown-item>
              <el-dropdown-item @click.native="changeTheme('blue')">blue</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <el-container class="content">
        <el-aside>
          <el-menu v-model="currentMenu">
            <el-menu-item
              v-for="route in routes.filter(r => !r.redirect)"
              :key="route.name"
              :index="route.name"
              @click="$router.push(route.path)"
            >{{ route.meta && route.meta.title }}</el-menu-item>
          </el-menu>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { routes } from './router'

export default {
  name: 'App',
  data() {
    return {
      routes,
      currentMenu: null
    }
  },
  methods: {
    changeTheme(theme) {
      window.document.documentElement.setAttribute('theme', theme);
    }
  },
  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-black);

  div {
    cursor: pointer;
  }
}

.container {
  height: 100%;
}

.content {
  overflow-y: hidden;
}
</style>
